<template>
  <div>
    <h1 style="font-size: 28px">网关详情</h1>
    <div>
      <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 14 }">
        <a-form-item label="数据ID">
          <a-input :value="id" disabled/>
        </a-form-item>
        <a-form-item label="网关ID">
          <a-input :value="gateway_id" disabled/>
        </a-form-item>
        <a-form-item label="站点ID">
          <a-input :value="site_id" disabled/>
        </a-form-item>
        <a-form-item label="MAC地址">
          <a-input :value="mac_address" disabled/>
        </a-form-item>
        <a-form-item label="IMEI">
          <a-input :value="imei" disabled/>
        </a-form-item>
        <a-form-item label="CCID">
          <a-input :value="ccid" disabled/>
        </a-form-item>
        <a-form-item label="CSQ">
          <a-input :value="csq" disabled/>
        </a-form-item>
        <a-form-item label="固件版本">
          <a-input :value="firmware_version" disabled/>
        </a-form-item>
        <a-form-item label="硬件版本">
          <a-input :value="hardware_version" disabled/>
        </a-form-item>
        <a-form-item label="状态">
          <a-input :value="status" disabled/>
        </a-form-item>
        <a-form-item label="在线">
          <a-input :value="online" disabled/>
        </a-form-item>
        <a-form-item label="MQTT主题">
          <a-input :value="topic" disabled/>
        </a-form-item>
        <a-form-item label="创建人">
          <a-input :value="creator_name" disabled/>
        </a-form-item>
        <a-form-item label="更新人">
          <a-input :value="updater_name" disabled/>
        </a-form-item>
        <a-form-item label="创建时间">
          <a-input :value="create_time" disabled/>
        </a-form-item>
        <a-form-item label="更新时间">
          <a-input :value="update_time" disabled/>
        </a-form-item>
        <a-form-item label="描述">
          <a-textarea :value="intro" disabled/>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
          <a-button style="width: 140px;" @click="onBack">返回</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script lang="ts">

import {defineComponent, reactive, toRefs} from "vue";

export default defineComponent({
  name: 'GatewayDetail',
  props: {
    item: {
      type: Object,
      default: null,
    },
    viewType: {
      type: String,
      default: null,
    }
  },
  setup(props, {emit}) {
    const data = reactive({
      id: props.item.id,
      gateway_id: props.item.gateway_id,
      site_id: props.item.site_id,
      mac_address: props.item.mac_address,
      imei: props.item.imei,
      ccid: props.item.ccid,
      csq: props.item.csq,
      firmware_version: props.item.firmware_version,
      hardware_version: props.item.hardware_version,
      status: props.item.status == 1 ? "已激活" : "未激活",
      online: props.item.online == 1 ? "已上线" : "未上线",
      topic: props.item.topic,
      intro: props.item.intro,
      creator_name: props.item.creator_name,
      updater_name: props.item.updater_name,
      create_time: props.item.create_time,
      update_time: props.item.update_time,
    });

    const onBack = () => {
      emit("my-emit", 'Cancel');
    }

    return {
      ...toRefs(data),
      onBack
    };
  }
});

</script>

<style scoped>

</style>
